Scribd
Upload
3 views

Introduction Into ReactJS (1)

Uploaded by

Jonathan Gandha
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
3 views

Introduction Into ReactJS (1)

Uploaded by

Jonathan Gandha
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 17

Course : Web Design

Effective Period : September 2019

Introduction to ReactJS

Session 09
Learning Objectives
At the end of this meeting is expected that
students will be able to:
– Describe user interface component and the
main features of HTML 5
– Construct mobile web application based on
HTML 5
Contents
• What is ReactJS ?
• ReactJS Features
• Introducing JSX
• Making an Interactive Component
• Conditional Render
What is React JS ?

• React JS is an open source javascript library for building User


Interface created by Facebook.

• React JS just takes care of everything related to the


appearance and the logic around it.

• React JS can design simple views for each level in the


application, so that it can be used to create and develop
web-based application development.
React JS Features :
• Declarative
What is meant here is that React can create interactive UI
(User Interfaces), so that it can easily create simpl e
designs for each state in the application. Declarative views can
make code easier to predict and easier to debug.
• Component
React Can create Encapsulated Components that can manage
each stage, then can create complex UIs based on that
capability.
• Learn Once
Developers can develop new features using React
wi t h o u t c h an gi n g t h e p rev i o u s co d e , Re a c t ca n a l s o
work using Node JS and mobile apps using React Native.
• React JS is starting to be one of the choices for developers to
develop web-based applications due to the large number of
templates available on the internet, such as ui-material and core-ui.

• React has a few different kinds of components, but we’ll start


with React.Componentsubclasses:
• Take a look at the sample code in the previous slide, we use
components to tell React what we want to see on the screen.
When our data changes, React will efficiently update and re-
render our components.
• “ShoppingList” is a React component class, or React
component type. A component takes in parameters,
called props (short for “properties”), and returns a hierarchy
of views to display via the render method.
• The render method returns a description of what you want to
see on the screen. React takes the description and displays
the result. In particular, render returns a React element,
which is a lightweight description of what to render.
• Most React developers use a special syntax called “JSX”
which makes these structures easier to write.
Introducing JSX

• JSX (Javascript XML) is an extension of Javasript. JSX allows


us to use HTML in Javascript.
• JSX is just like XML and HTML, it also has tag names,
attributes, and child elements. Actually we can just use React
without JSX.
• Take a look at the variable declaration below :

• This strange tag syntax is not a string or HTML.

• This syntax is known as JSX, and it is an extension syntax for


JavaScript. We recommend using it with React to describe
what the user interface should look like. JSX may remind you
of a template language, the difference is that JSX is equipped
with the full power of JavaScript.
Making an Interactive Component
• For example, let’s fill the Square component with an “X”
when we click it. First, change the button tag that is returned
from the Square component’s render() function to this :

• If you click on a Square now, you should see an alert in your


browser.
• As a nex t ste p , we wa nt t h e S q u a re co m p o n e nt to
“remember” that it got clicked, and fill it with an “X” mark.
To “remember” things, components use state.
• React components can have state by setting this.state in their
constructors. this.stateshould be considered as private to a
React component that it’s defined in. Let’s store the current
value of the Square in this.state, and change it when the
Square is clicked.
• First, we’ll add a constructor to the class to initialize the
state: (Next Slide)
• Now we’ll change the Square’s render method to display the current state’s
value when clicked:
ü Replace this.props.value with this.state.value inside the <button> tag.
ü Replace the onClick={...} event handler with onClick={() =>
this.setState({value: 'X'})}.
ü Put the className and onClick props on separate lines for better
readability.
• After these changes, the <button> tag that is returned by the
Square’s render method looks like this:

• B y c a l l i n g t h i s . s e t S tat e f ro m a n o n C l i c k h a n d l e r i n t h e
Square’s render method, we tell React to re-render that Square
w h e n eve r i t s < b u tto n > i s c l i c ke d . A f te r t h e u p d ate , t h e
Square’s this.state.value will be 'X', so we’ll see the X on the game
board. If you click on any Square, an X should show up.
Conditional Render
• In React, you can create different components that
include the required behavior.
• Then, you can render only parts of it, based on the state
of your application.
• Conditional rendering in React works the same way as
conditional operators in Javascript.
• Use JavaScript operators such as if or conditional
operators to create an element representation of the
current state, and React will update the UI according to
that state.
• Take a look at this two components :
• We’re going to create a greeting component that displays
one of the two components above based on whether the
user in logged in:

• The example above renders a different greeting component


based on the value of the is LoggedIn prop.
References
• React
https://reactjs.org/docs/getting-started.html
https://id.reactjs.org/docs/hello-world.html
https://socs.binus.ac.id/2019/12/30/apa-itu-
react-js/

You might also like