React JS Part 1
Khennouche Faical Abderraouf
About Me
What is React
As simple as that:
React is a Javascript library for
building user interfaces (UI)
Basic Methods of React
In React we have two main methods:
●
ReactDom.render(....)
●
React.createElement(.....)
ReactDOM.render
ReactDOM.render(
Element,
Container[,
Callback]
);
React.createElement
React.createElement(
Type,
[props],
[...children]
);
Example of that
ReactDOM.render(
‘My Text’,
document.getElementById(‘root’)
);
ReactDOM.render(
React.createElement(....),
document.getElementById(‘root’)
);
React.createElement(
‘h1’,
{ style:
{color: ‘red’}
},
‘This is my message’
);
ReactDOM.render(
React.createElement(
‘h1’,
{ style:
{color: ‘red’}
},
‘This is the final message’
),
document.getElementById(‘root’)
);
The power of react is in the
COMPONENTS
Library Mode
Application Mode
Application Mode
Stateless & stateful
Stateful
Stateful
Stateful
Stateless
State & Props
State
State is a JavaScript object that belongs to the current component and it defines the current
state of the this component, changing the state will result in re-rendering the component.
Props
Props are similar to States, except for the fact that Props are passed to the component by its parent.
React Components
Architecture
Presentation Component
Container Component
Presentation Component
Presentation components are used just to display data, they do not manage the state in anyway, the only purpose for the
presentation component is TO DISPLAY DATA.
Presentation Component
In general the presentation components are functional components since we do not need to manage any state in
them.
Container Component
Container component is responsible for all the logic of a stateful component, and it make use of the presentation components.
Container Component
In general, most of container components are classes, so we can use lifecycle methods like (componentWillMount,
componentDidMount...)
Project File Structure
Components grouped inside Containers and Presentation folders.
Components structured in Containers and Presentation folders.
Examples of Container & Presentation Components
Presentation Component
Container Component
Fetching Data
Fetch
Fetch
The Fetch API provides an interface for fetching resources
(including across the network)
Example of fetch request
Other request APIs
There are many other APIs to get or send data, some are native like XHR (XMLHttpRequest),
and others are third party libraries like Axios.
Context API
A way to pass data through component tree without
having to pass it manually using props.
Parent
Gen1 Child
Gen2 Child
Parent
Gen1 Child
Gen2 Child
Parent
Gen1 Child
Gen2 Child
This helps us avoid a problem known as prop drilling
Provider
A provider is like a global state object that can be accessed from
other components
Consumer
The consumer has access to the provider down the chain
Render Props
Render a feed of Players
●
●
●
●
●
Get list of Players using an API.
Show a spinning loader.
Hide the spinning loader.
Render the result.
If error, show error.
<PlayersFeed />
●
●
●
●
●
Get list of Coaches using an API.
Show a spinning loader.
Hide the spinning loader.
Render the result.
If error, show error.
<CoachesFeed />
●
●
●
●
●
Get list of Coaches using an API.
Show a spinning loader.
Hide the spinning loader.
Render the result.
If error, show error.
<MembersFeed type=”Players OR Coaches”/>
●
●
●
●
●
Get User Settings using an API.
Show a spinning loader.
Hide the spinning loader.
Render the result.
If error, show error.
●
●
●
●
●
Get User Settings using an API.
Show a spinning loader.
Hide the spinning loader.
Render the result.
If error, show error.
<MembersFeed url=”Players OR Coaches”/>
<UserSettings />
●
●
●
●
●
Get User Settings using an API.
Show a spinning loader.
Hide the spinning loader.
Render the result.
If error, show error.
Show a loader for Members and other loader
for settings
Render Props
Render props is a simple technique to share
code between react components.
Example of that
Next Session
●
●
●
●
Redux
React Router
Prop-Types
Hooks
Resources
●
●
●
●
https://reactjs.org/
https://www.youtube.com/watch?v=lG6Z0FQj_SI&t=701s
https://en.wikipedia.org/wiki/React_(web_framework)
https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API
Thank You