In this exercise, the goal is to apply as many as possible of the concepts you've just learned:
- when and how to setup react in your application,
- ways of using react.
- Fork this repo
- Clone this repo
Whenever you create a first significant change, you should make your first commit.
- Follow these guidelines to add, commit and push changes.
In the end of this document, you will find guidelines on how to submit the exercise.
In this exercise, you will try to setup the react application. As you can see react is a javascript library to create super cool reusable UI. Our goal is to understand the ways in which you can include react to your application.
We will divide our work into three parts:
- part I - Include react library in your html file
- part II - Use JSX and babel compiler
- part III - By using npm/yarn
So let's get started!
It might seem like a joke, but this is our goal in this iteration:
The very first step is deciding how to add react to the html page. Do you remember how to include javascript in your html? As you can see, React is not a framework, It's a very simple and powerful javascript library to create reusable UI components. Since it is a javascript library, we can add it in the same way like javascript. To include the react library please include the following code in your index.html file.
<!-- Load the React Library -->
<!-- React and React DOM -->
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>Our recommendation is to try to keep it as simple as possible. Try to identify the ways to setup react library.
Your task in this iteration is just to finish the react setup. To do this, let's use the same html file what we created and create a div with an id called react container. You have included the react libraries to your javascript file. But we have to include our react element to your index.html. To do this create a file called app.js and include it in your html file.
<body>
<!-- Create a div to setup a react container -->
<div id="react-container"></div>
<!-- Load the React Library -->
<!-- React and React DOM -->
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<!-- Include the react element -->
<script src="./app.js"></script>
</body>
You're ready to move to the next iteration. 🙌
Your task in this iteration is to check whether you have successfully setup react in your application. To do it inside the app.js, get the div tag like how you get the element using it's id.
const container = document.getElementById('react-container');
Now the most important step, How to make a difference between Javascript and React. You might have learnt about ReactDOM in your code along session. ReactDOM is the place where you render the output. Now how to render using ReactDOM. Kindly look into the code snippet given below.
ReactDOM.render("Hello! Welcome to React",container);
If you do the above, you need to get an output similar to this.
If you get the above output, you can ensure that the react is completely setup in your system.
The component can be a functional component or class component. Now before moving to the class component let us try to use the same example given above and try to convert it as a functional component.
This is going to be our output.
To get the above it is quite simple. Check the code snippet given below. There is no modification required in the index.html.
React.createElement has three attributes (component,props,children)
**Component can be a react component - reusable piece of UI.
**Props are properties of the component or element.
**children can be a nested component or html element.
In the below code when you check the react element it has a div tag followed by null and a string called Hey ProGrads! Welcome to React Learning. The div tag refers to the component. null refers to the property and the statement is the children. When you inspect the element you can see a output similar to this. The next div tag is the children.
// Functional component
const Container = () =>{
return React.createElement(`div`,null,`Hey ProGrads! Welcome to React Learning`,
React.createElement(`div`,null,`Let's rock and roll`)
);
}
// Render the Container
const container = document.getElementById('react-container');
ReactDOM.render(React.createElement(Container),container);
Now in this iteration we will try working with the class component. To define a class component. We are going to replicate the same output what we got in function component. Check the code snippet below. Replace the above code instead of functional components and you can see that it should print
Hey ProGrads Let's rock and roll
class ReactContainer extends React.Component{
// constructor - to initialize the state
// render method to render the react dom
render(){
return React.createElement(`div`,null,`Hey ProGrads`,
React.createElement(`div`,null,`Let's rock and roll`)
);
}
}
const container = document.getElementById('react-container');
ReactDOM.render(React.createElement(ReactContainer),container);
You're ready to move to the next iteration. 🙌
In the progressions above, we only relied on features that are natively supported by the browsers. This is why we used a JavaScript function call to tell React what to display: However, React also offers an option to use JSX instead.JSX stands for Javascript XML,
So far whatever we have used we did it directly without the use of Babel compiler. Babel is a very powerful javascript complier which converts react script to Browser acceptable Javascript. As you have learnt that react uses virtual dom and babel helps to transpile to browser javascript.
The quickest way to try JSX in your project is to add this <script> tag to your page:
<!-- Include babel compiler -->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
Now you can use JSX in any <script> tag by adding type="text/babel" attribute to it.
class ReactContainer extends React.Component{
// JSX tags
// JSX there should be one parent element
render(){
return (
<div>Hello! Welcome to ProGrads
<div>Let's rock and roll </div>
</div> )
};
}
const container = document.getElementById('react-container');
// Direclty pass the component to render
ReactDOM.render(<ReactContainer/>,container);
Isn't the above one so easy. So instead of too many React.createElement you can use JSX which is super cool to use.
create-react-app is a project aimed at getting you up to speed with React in no time. It provides a ready-made React application starter, so you can dive into building your app without having to deal with Webpack and Babel configurations.
It provides out of the box:
I. A development server with hot reloading II. Provides a testing environment with Jest III. Allows to build the React app IV. Ready for ES6+ syntax V. Bundles all your JavaScript and assets VI. Comes with CSS autoprefixer, SASS and CSS Modules support
When you run npx create-react-app , npx is going to download the most recent create-react-app release, run it, and then remove it from your system. This is great because you will never have an outdated version on your system, and every time you run it, you’re getting the latest and greatest code available.
To create the app :
npx create-react-app first-react-app
To run the app :
cd first-react-app npm start
To run it just go to open the console and go the the application directory and just type npm start
If you didn't add, commit and push the changes you made, this is the last call. 😄
please share your github links with your Mentors. Your Mentor's will check up your work and provide feedback.
In this exercise, you've learnt various ways of setting up react in your system. If you managed to do it, good job! 🏆
This concludes the React setup. We are proud of you!
Happy Coding ProGrad ❤️!
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent