msb-public
/
30-Days-Of-React
mirror of https://github.com/Asabeneh/30-Days-Of-React
2
1
Code Issues Projects Releases Wiki Activity

Update 03_day_setting_up.md

Browse Source
pull/4/head
Asabeneh 4 years ago committed by GitHub
parent a77713ce4b
commit 267b063802
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 13 additions and 17 deletions
Show Stats Download Patch File Download Diff File

30
03_Day_Setting_Up/03_day_setting_up.md
Unescape View File

@ -37,11 +37,11 @@
# Setting Up # Setting Up
In the previous section, we learned about JSX and we access the React and ReactDOM package using CDN. However, in real life work in environment instead of CDN you will use create-react-app package to generate a React project starter(boilerplate). The initial public release was on Jul 22, 2016. Before this developer used to configure webpack which a JavaScript module bundler, babel and all the necessary packages manually and this used to take half an hour or may be more. Now, create-react-app will take care of everything and you will be in charge developing product only instead of spending too much time configuring and setting up projects. Before we start using different tools let's have a brief introduction for all the tools we are going to use in this challenge. You do not have understand everything but I will try to give a very short introduction about some of the tools and technologies which we use when we work with React. In the previous section, we learned about JSX and we access the React and ReactDOM package using CDN. However, in real life work projects instead of CDN you will use create-react-app package to generate a React project starter(boilerplate). The initial public release of *create-react-app* was on Jul 22, 2016. Before this time, developer used to configure webpack which a JavaScript module bundler, babel and all the necessary packages manually to get started React and this used to take half an hour or may be more. Now create-react-app will take care of everything and you will be in charge of developing only instead of spending too much time configuring and setting up projects. Before we start using different tools let's have a brief introduction for all the tools we are going to use in this challenge. You do not have to understand everything well but I will try to give a very short introduction about some of the tools and technologies which we use when we work with React.
## Node ## Node
Node is a JavaScript run time environment which allows to run JavaScript on the server.Node was created in 2019. Node has played a great role for the growth of JavaScript. Node is a JavaScript run time environment which allows to run JavaScript on the server. Node was created in 2019. Node has played a great role for the growth of JavaScript. React application starts by defaul at localhost 3000. The create-react-app has configured a node server for the application the React Application. We will see create-react-app soon.
If you do have node, install node. Install [node.js](https://nodejs.org/en/). If you do have node, install node. Install [node.js](https://nodejs.org/en/).
@ -74,13 +74,14 @@ NPM was created in 2010. You do not need to install NPM separately when you inst
## Visual Studio Code ## Visual Studio Code
We will use Visual Studio Code and [download](https://code.visualstudio.com) and install it if you do not have one yet. We will use Visual Studio Code as a code editor and [download](https://code.visualstudio.com) and install it if you do not have one yet.
## Browser ## Browser
We will use Google chrome We will use Google chrome
## Visual Studio Extensions ## Visual Studio Extensions
You may need to install these extensions from Visual Studio Code
- Prettier - Prettier
- ESLint - ESLint
@ -127,33 +128,28 @@ Asabeneh@DESKTOP-KGC1AKC MINGW64 ~/Desktop
\$ cd 30-days-of-react/ \$ cd 30-days-of-react/
``` ```
```sh
Asabeneh@DESKTOP-KGC1AKC MINGW64 ~/Desktop/30-days-of-react (master)
\$ cd 30-days-of-react
```
```sh ```sh
Asabeneh@DESKTOP-KGC1AKC MINGW64 ~/Desktop/30-days-of-react (master) Asabeneh@DESKTOP-KGC1AKC MINGW64 ~/Desktop/30-days-of-react (master)
\$ npm start \$ npm start
``` ```
Now your react app should run at localhost 3000. Go to the App.js and modify the content by writing some text, you will see the latest change on the browsers. Now your react app should run at localhost 3000. Go to the App.js and modify the content by writing some text, you will see the latest change on the browsers.
To stop the running server, press CTR + C To stop the running server, press Ctr + C
![React Starting](../images/react_app_starting.png) ![React Starting](../images/react_app_starting.png)
## React Boilerplate ## React Boilerplate
Let's see the React boiler plate which has been created by create-react-app. Whenever you create a new project you run create-react-app and name of the project. Let's see the React boilerplate which has been created by create-react-app. Whenever you create a new project you run create-react-app and name of the project.
In the following React boilerplate, there are three folders:node_modules, public and src. In addition, there are .gitignore, README.mde, package.json and yarn.lock. In some of you instead of yarn.lock, you may have package-lock.lock. In the following React boilerplate, there are three folders:node_modules, public and src. In addition, there are .gitignore, README.mde, package.json and yarn.lock. In some of you instead of yarn.lock, you may have package-lock.json.
It is good to know these folders and files. It is good to know these folders and files.
- node_modules - store all the necessary node packages of the react applications. - node_modules - store all the necessary node packages of the react applications.
- Public - index.html - the only HTML file we have in the entire application - Public
-index.html - the only HTML file we have in the entire application
- favicon.io - a favicon - favicon.io - a favicon
- manifest.json - is use to make the application a progressive web app - manifest.json - is use to make the application a progressive web app
- other images- which can be used for open graph image or for other purposes - other images- which can be used for open graph image or for other purposes
@ -330,9 +326,9 @@ ReactDOM.render(app, rootElement)
![JSX using create react app to render more jsx](../images/rendering_multiple_jsx_elements_create-react_app.png) ![JSX using create react app to render more jsx](../images/rendering_multiple_jsx_elements_create-react_app.png)
## Style in JSX ## Styles in JSX
Let's apply style to the JSX elements. We can style JSX either using inline style, internal or external CSS. Now, let's apply an inline style to each JSX element. Let's apply style to the JSX elements. We can style JSX either using inline, internal or external CSS styles. Now, let's apply an inline styles to each JSX elements.
```js ```js
// index.js // index.js
@ -400,7 +396,7 @@ ReactDOM.render(app, rootElement)
![Inline styling JSX](../images/styling_jsx_inline_create_react_app.png) ![Inline styling JSX](../images/styling_jsx_inline_create_react_app.png)
Now, lets apply an internal style, we put all the CSS on the header of the index.css. Now, lets apply an internal style, we put all the CSS on the header of the index.html.
```js ```js
// index.js // index.js
@ -568,7 +564,7 @@ ReactDOM.render(app, rootElement)
## Importing Media Objects in React ## Importing Media Objects in React
How do we import images, video and audio in react? Let's see how we import image first. How do we import images, video and audio in react? Let's see how we import image first.
Create images folder in the src folder and save an image. For instance let's save asabeneh.jpg image and let's import this image to index.js Create images folder in the src folder and save an image. For instance let's save asabeneh.jpg image and let's import this image to index.js. After importing we will inject it to a JSX expression, user. See the code below.
```js ```js
// index.js // index.js

Write Preview
Loading…
Cancel
Save