We will be viewing each one from top down. Once you have opened it go ahead and follow along! Inside this folder is where tests are located.
This is auto added as we initialize the project from the cli. This is specific for the packages called react-test-renderer and jest. What this does is to test our App, and make sure that it can be rendered correctly. Yarn is just another package manager similar to npm.
One question you may be asking me is how did I know the command to run the test. Once we get into the package. It will make more sense there but let's continue on! Next we have our android folder, this will basically have our android related files and folders. Next up is our ios folder. You probably guessed it, it's for our iOS side of course! This is probably one of the most important folders we have. This contains all our packages and dependencies for React Native.
When I say packages and dependencies what exactly do i mean. Packages are written libraries that we are able to use without the need to do it from scratch. Dependencies are basically other packages that another package may use. They contain many different types of things we can use, like methods and classes and so much more.
Pre-written code that makes our life easier! This folder contains all of that. When we install any new packages it will go inside this folder.
And grab everything we need from the npm repository. React Native uses all of these pre written code in conjunction to create what we see and work with, pretty amazing. We have the. Next up we have. These two files are in charge of containing consistent coding styles between different IDE and editors.
ESLint is a tool that helps us developers find issues with our code before it even gets executed. It allows us to create our own rules and customize it completely to our liking. Next we have prettierrc. This just helps with formatting when coding. Like adding single quotes instead of double, brackets spacing etc.. We can customize this as well.
Moving on, we have. This is Facebook's flow. It is very similar to typescript. All it does is to check for correct formatting when dealing with types. Next, we have our. These will be related to github repos. Finally the last config file. This is a configuration for watchman. Again the watchman checks for changes and updates. So any custom configurations go in here. Next up is App. This is one of the most important files we have in our project.
This is the main file that is being rendered. Later when we create the component. We will dive deeper into this. Moving on we have an app. This is a manifest format for describing web apps. It includes any environmental variables, add ons and other information. Next, we have our babel configuration file here.
Remember babel is a tool that is in charge of converting our code into older versions of javascript. Next up is index. Another important file in our project. This file is the starting point for all react native applications. If we quickly take a look inside. We can see that the app gets registered here. We are importing our App. Then we are registering it using the AppRegistry method. That's it! Next up we have the metro config file. Any custom configurations for metro bundler can go within this file.
Here we have our packages list. Package-lock contains all the exact versions of dependencies to be installed as well as the dependencies of those dependencies. It will basically lock down the versions of the packages. This just ensures that no matter where you run this project, it will always be the same.
The package file just contains the minimal version of the packages used but not only that it contains versioning, name, author, and much more. Our scripts are set up here as well! We do forsure need the package. But we don't necessarily need the package. Next up is yarn, you may or may not have this file.
Again yarn is just another package manager, similar to npm. If you run yarn you will have this. If not this won't exist. Create React App Create React App is a comfortable environment for learning React , and is the best way to start building a new single-page application in React.
To create a project, run: npx create-react-app my-app cd my-app npm start. Is this page useful? Edit this page. Main Concepts. Advanced Guides. API Reference. Previous article. Lastly, the package. It has some dependencies of libraries that are currently installed and if you install other packages, they will be listed as well. To do this, we will run one of the scripts that create-react-app CLI provides. If you open the package. This allows us to start the development server and build our project locally.
It also comes with live-reload so that any changes you make in your app reflect in real-time. You will see this in a moment. Back to your computer terminal, change directory inside your project folder, cd react-todo-app.
Then run this command:. Once the command is done, your app will launch automatically in your browser window on port If nothing happens, visit localhost in the browser address bar. You should see your default app. At this point, we can start creating our React App. The files that describe what you are seeing in the frontend live in the src folder. Since this React tutorial focuses on the beginners, we will write all the src files from scratch.
The frontend breaks immediately you do that. This is because React needs an index. This file is the entry point. In the src folder, create an index. Comparing this code to the one we write directly in the HTML file at the beginning.
A module is just a file that usually contains a class or library of functions. And create-react-app CLI have both files installed for us to use. It comes bundled with this CLI. This is not practicable. Earlier, I mentioned that an App in React is built by combining a bunch of reusable components. Now, this component can either be a function or a class-based.
A class component is created using the ES6 class syntax while the functional component is created by writing function.
Before the Hence, it is called a stateful component. On the other hand, the function component before React And as such, it is referred to as a stateless component. This type is the simplest form of React component because it is primarily concerned with how things look. But now, things have changed with the introduction of React Hooks. You can now manage the stateful features inside of the function component.
In this tutorial, we could simply ignore the class-based type and focus on the modern functional component. But NO! You may come across the class-based when working on a project. So understanding all the tools available to you is paramount. So, we will start by using the class component to manage the functionality of our app as you will see in a moment. Later in the series, you will learn how to manage this logic in a function component using the React Hooks.
Remember, in the beginning, we decomposed our application into a tree of isolated components. Then, TodosList holds another component called TodoItem. Meaning, we are creating six components in total. Revisit the app design if you need a refresher. Start by creating a folder called components inside the src directory and create these components files — i.
Next, add the following code in the parent component file, TodoContainer. Also, go inside the index. Save the file and check the frontend. You should have a heading and a paragraph text being rendered on the screen. In the parent file, we started by creating a React class component called TodoContainer by extending the Component class in the React library.
Inside this class, we have the render method where we are returning the JSX that is being rendered on the screen. This method is different from the render in the ReactDOM. The render used here is a component render. Unlike the other, it takes no arguments and does not directly interact with the browser. It focuses on returning the corresponding React elements for that component. You cannot return more than one JSX element next to each other except you wrap them in a single element.
Now, instead of rendering a simple JSX element, we are rendering a React component. This is necessary so that its instance e. Also, take note of the component file path as used in the index. Make sure you always specify the relative path of that file from the current directory. In our case, ". Meaning the TodoContainer file is located in the components folder inside the current directory.
The file extension defaults to. React provides for us the StrictMode to activate checks and logs a warning message at runtime. This enables checks and warning not only for the component but also its descendants. If you want to activate check for a particular component, you should wrap that component instead of the root component. It may be a child component receiving data from its parent or maybe the user directly input data to the component.
Understanding how the data flows is very crucial to building React component. That brings us to the concept of state and props. It can be thought of as the attributes in the HTML element. For instance, the attributes — type , checked — in the input tag below are props. When this happens, the data that is received in the child component becomes read-only and cannot be changed by the child component. This is because the data is owned by the parent component and can only be changed by the same parent component.
Unlike the props, the state data is local and specific to the component that owns it. It is not accessible to any other components unless the owner component chooses to pass it down as props to its child component s. Maybe it was inputted or comes from the props. Also, if two or more child components need to communicate with each other. Now, once the component receives this input data, we need to pass it to a central location where we can manage it and display in the browser view.
For instance, the TodosList component will be accessing the data and display its todos items. Also, the TodoItem component which holds the checkbox and delete button will be accessing the data to update the checkbox, update edited items and also remove items from the state.
Now, for every child component that will be accessing the data, you will need to declare the shared state in their closest common parent. For this reason, the shared state data will live in the TodoContainer component, which is their closest common parent. This parent component can then pass the state back to the children by using props.
Though, instead of declaring a shared state in the parent component as mentioned above, an alternative is to use the Context API to manage the state data. As a beginner, you should explore all options. In this React tutorial series, we will start with the simplest of them. Once you have the basic knowledge, you can then learn to use the Context API for your state management.
To add a state in a class component, we simply create a state object with key-value pair. The value can be of any data type. In the code below, the value is an array. If you look at our design critically, we will be updating the to-dos checkbox. This implies that we need to make provision for that.
So a typical to-dos item will look like this:. Now, instead of an empty array, we will have an array of objects.
0コメント