- [Injecting data to JSX elements](#injecting-data-to-jsx-elements)
- [Injecting data to JSX elements](#injecting-data-to-jsx-elements)
- [Importing Media Objects in React](#importing-media-objects-in-react)
- [Importing Media Objects in React](#importing-media-objects-in-react)
- [Exercises](#exercises)
- [Exercises](#exercises)
# 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 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.
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 _create-react-app_ was released on Jul 22, 2016. Before this time, developers 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.
## 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. 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.
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 default at localhost 3000. The create-react-app has configured a node server for 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/).
@ -81,6 +81,7 @@ We will use Visual Studio Code as a code editor and [download](https://code.visu
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
You may need to install these extensions from Visual Studio Code
- Prettier
- Prettier
@ -150,6 +151,7 @@ It is good to know these folders and files.
- Public
- Public
-index.html - the only HTML file we have in the entire application
-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
**A 30DaysOfReact** challenge is a guide for both beginners and advanced JavaScript and React developers. Welcome to 30 Days Of React. React is a JavaScript library. I enjoy using and teaching React and I hope you will do so too.
**A 30DaysOfReact** challenge is a guide for both beginners and advanced JavaScript and React developers. Welcome to 30 Days Of React. React is a JavaScript library. I enjoy using and teaching React and I hope you will do so too.
In this step by step 30 Days React challenge, you will learn React which is one of most popular user interface JavaScript libraries.
In this step by step 30 Days React challenge, you will learn React which is one of most popular user interface JavaScript libraries.
React can do everything that JavaJavaScript can do. React can be used **_to add interactivity to websites, to develop mobile apps, desktop applications, games_**.
React can do everything that JavaScript can do. React can be used **_to add interactivity to websites, to develop mobile apps, desktop applications, games_**.
I believe you will learn quite a lot in the next 30 days and your programming and problem solving skills will also be improved significantly.
I believe you will learn quite a lot in the next 30 days and your programming and problem solving skills will also be improved significantly.
I will use converstational English and less jargons to write this challenge. The content will be continousely updated. If you find a typo or grammar mistakes don't suprised because I don't do any proof read before I publish it. I would recommond you to focus on the main message of the challenge instead of the English and some minor mistakes. I really appreciate if you send me pull requests for improvement and remember to pull first from master before you send pull requests. Most of the images I have used in this challenge came from 30DaysOfJavaScript challenge therefore you may need to rename file names and folders 30DaysOfReact.
I will use converstational English and less jargons to write this challenge. The content will be continousely updated. If you find a typo or grammar mistakes don't suprised because I don't do any proof read before I publish it. I would recommond you to focus on the main message of the challenge instead of the English and some minor mistakes. I really appreciate if you send me pull requests for improvement and remember to pull first from master before you send pull requests. Most of the images I have used in this challenge came from 30DaysOfJavaScript challenge therefore you may need to rename file names and folders 30DaysOfReact.