Adam Boduch [Adam Boduch] - React 16 Tooling
Here you can read online Adam Boduch [Adam Boduch] - React 16 Tooling full text of the book (entire story) in english for free. Download pdf and epub, get meaning, cover and reviews about this ebook. year: 2018, publisher: Packt Publishing, genre: Computer. Description of the work, (preface) as well as reviews are available. Best literature library LitArk.com created for fans of good reading and offers a wide selection of genres:
Romance novel
Science fiction
Adventure
Detective
Science
History
Home and family
Prose
Art
Politics
Computer
Non-fiction
Religion
Business
Children
Humor
Choose a favorite category and find really read worthwhile books. Enjoy immersion in the world of imagination, feel the emotions of the characters or learn something new for yourself, make an fascinating discovery.
![Adam Boduch [Adam Boduch] React 16 Tooling](https://litark.com/uploads/posts/book/119466/adam-boduch-adam-boduch-react-16-tooling.jpg)
- Book:React 16 Tooling
- Author:
- Publisher:Packt Publishing
- Genre:
- Year:2018
- Rating:5 / 5
- Favourites:Add to favourites
- Your mark:
React 16 Tooling: summary, description and annotation
We offer to read an annotation, description, summary or preface (depends on what the author of the book "React 16 Tooling" wrote himself). If you haven't found the necessary information about the book — write in the comments, we will try to find it.
React 16 Tooling covers the most important tools, utilities, and libraries that every React developer needs to know - in detail.
About This Book- Each chapter presents meta-development solutions to help React developers
- The tools used are presented in a practical, solution-oriented approach with no fluff
- The chapters are arranged in a logical order that mirrors a typical React development workflow, but you are free to tweak the approaches discussed to fit your own unique style
This book is for React developers of any skill level who want to make their lives easier. It helps to have some familiarity with React, but if you are an experienced web developer looking at React, then this book will show you how to build a resilient toolset around you before you begin.
What You Will Learn- Bootstrap a React application using create-react-app
- Isolate React component development using Storybook
- Write effective unit tests for your React components using Jest
- Ensure that your component code is to standard using ESLint
- Use browser extensions and built-in component instrumentation to debug React applications
- Enable type safety in React components with Flowtype
- Deploy React applications inside a Docker container as part of a larger application stack
React 16 Tooling covers the most important tools, utilities, and libraries that every React developer needs to know - in detail. As React has grown, the amazing toolset around it has also grown, adding features and enhancing the development workflow. Each of these essential tools is presented in a practical manner and in a logical order mirroring the development workflow. These tools will make your development life simpler and happier, enabling you to create better and more performant apps.
Adam starts with a hand-picked selection of the best tools for the React 16 ecosystem. For starters, theres the create-react-app utility thats officially supported by the React team. Not only does this tool bootstrap your React project for you, it also provides a consistent and stable framework to build upon. The premise is that when you dont have to think about meta development work, more focus goes into the product itself.
Other React tools follow this same approach to automating and improving your development life. Jest makes unit testing quicker. Flow makes catching errors easier. Docker containers make deployment in a stack simpler. Storybook makes developing components straightforward. ESLint makes writing standardized code faster. The React DevTools plugin makes debugging a cinch. React 16 Tooling clears away the barriers so you can focus on developing the good parts. In this book, well look at each of these powerful tools in detail, showing you how to build the perfect React ecosystem to develop your apps within.
Style and approachThis book covers React tools that help developers with the most relevant challenges they face today. Each chapter begins by defining the challenge faced by developers and why the tool is required, then shows how to fix the problem using React tooling.
Downloading the example code for this book You can download the example code files for all Packt books you have purchased from your account at http://www.PacktPub.com. If you purchased this book elsewhere, you can visit http://www.PacktPub.com/support and register to have the files e-mailed directly to you.
Adam Boduch [Adam Boduch]: author's other books
Who wrote React 16 Tooling? Find out the surname, the name of the author of the book and a list of all author's works by series.
![Adam Boduch [Adam Boduch] - React and React Native - Second Edition](/uploads/posts/book/119457/thumbs/adam-boduch-adam-boduch-react-and-react-native.jpg)
React 16 Tooling — read online for free the complete book (whole text) full work
Below is the text of the book, divided by pages. System saving the place of the last page read, allows you to conveniently read the book "React 16 Tooling" online for free, without having to search again every time where you left off. Put a bookmark, and you can go to the page where you finished reading at any time.
Font size:
Interval:
Bookmark:
If you created a React application using the create-react-app tool in the previous chapter, then you have everything you need to launch a development server. No configuration is necessary! Let's start it up right now. First, make sure that you're in the project directory:
cd my-react-app/Now you can start the development server:
npm startThis will start the development server using the start script from the react-scripts package. You should see the console output that looks like this:
Compiled successfully!You can now view my-react-app in the browser.Local: http://localhost:3000/On Your Network: http://192.168.86.101:3000/Note that the development build is not optimized.To create a production build, use npm run build.You'll notice that in addition to printing this output in the console, this script will launch a new browser tab with http://localhost:3000/ as the address. The page that's displayed looks like this:
We've accomplished a lot in just a couple of chapters so far. Let's pause and recap what we've done:
- You created a new React application using the create-react-app package.
- You have the basic project structure in place and a placeholder App component to render.
- You launched the development server, and now you're ready building React components.
To get to this point without create-react-app and react-scripts would typically take hours. You probably don't have hours to spend messing with meta development work. A lot of it has just been automated for you!
The final step to making Barely SMS ready for production deployment is removing the React development server from the UI service. The development server was never intended for production use because it has many parts that aid developers, but ultimately slow down the overall user experience and have no place in a production environment.
Instead of using a Node.js based image, you can use a simple NGINX HTTP server that serves static content. Since this is a production environment and you don't need a development server that builds UI assets on the fly, you can just use the create-react-app build script to build your static artifacts for NGINX to serve:
npm run buildThen, you can change the Dockerfile.ui file so that it looks like this:
FROM nginx:alpine EXPOSE 3000 COPY nginx.conf /etc/nginx/nginx.conf COPY build /data/www CMD ["nginx", "-g", "daemon off;"]This time, the image is basic on an NGINX server that serves static content, and we're passing it a nginx.conf file. Here's what this looks like:
worker_processes 2; events { worker_connections 2048; } http { upstream service_api { server api:3001; } server { location / { root /data/www; try_files $uri /index.html; } location /api { proxy_pass http://service_api; } } }Here you have a fine-grained level of control over where HTTP requests are sent. For example, if the /api/login and /api/logout endpoints were moved to their own service, you could control this change here rather than having to rebuild the UI image.
The last change that's required to be done is to docker-compose.yml:
api: image: barely-sms-api expose: - 3001 ports: - "3001:3001" ui: image: barely-sms-ui expose: - 80 links: - api ports: - "3000:80"Did you notice that port 3000 now maps to port 80 in the ui service? This is because NGINX serves on port 80. If you run docker-compose up, you should be able to visit http://localhost:3000/ and interact with your static build.
Congratulations! With no more React development server, you're just about as ready for production as you can be from a build tool perspective.
The last thing you want to spend time on is testing someone else's code. Yet, sometimes you're forced to do exactly that. For example, let's say that you want to test a function that makes a fetch() call to some HTTP API. Another example: your React component uses some library to help set and manipulate its state.
In both of these examples, there's code that you didn't implement that's being run when your unit tests run. You definitely don't want to reach out to an external system over HTTP. You definitely don't want to make sure that the state of your component is being set correctly based on the output of functions from another library. For the code that we don't want to test, Jest provides a powerful mock system. But you need to draw a line somewhereyou can't mock every little thing.
Here's an illustration of a component and its dependencies:
There are three libraries that this component requires in order to function. You probably don't want to unit test this component as is, because you would also be testing the functionality of three other libraries. The libraries that you don't want to run during unit testing can be mocked using Jest. You don't have to mock every library, and for some, mocking them may be more trouble than they're worth.
For example, let's say that Lib C in this scenario is a date library. Do you really need to mock it, or could you actually use the values it produces in component tests? A date library is pretty low level, so it's probably stable and it probably poses very little risk to the functioning of your unit test. On the other hand, the higher the level of the library and the more work that it does, the more problematic it is for your unit tests. Let's take a look at how this looks if you decided to use Jest to mock Lib A and Lib B:
If you tell Jest that you want to mock implementations of Lib A and Lib B, it can use the actual modules and automatically create an object that your tests can use. So, with very little effort on your part, you can mock dependencies that pose challenges to testing your code.
In this chapter, you learned how to install the Create React App tool on your system. Create React App is the tool of choice for bootstrapping modern React applications. The goal of Create React App is to have developers go from nothing to creating React components in minimal time.
Once this tool was installed, you created your first React app using it. The only piece of configuration you had to provide was the application name. Once the tool finished installing dependencies and creating boilerplate files and directories, you were ready to start writing code.
Then, we looked at react-scripts and the dependencies that this package takes care of for you. You were then taken on a whirlwind tour of the overall structure of the application that was created for you.
In the following chapter, we'll start developing some React components. To do this, we'll fire up the development server. You'll also learn how to get up and running with a create-react-app development environment.
Before you get started with building static websites using Gatsby, let's set the context with a brief discussion on why you would want to do this. There are three key factors at play here we'll go over each of them now.
Font size:
Interval:
Bookmark:
Similar books «React 16 Tooling»
Look at similar books to React 16 Tooling. We have selected literature similar in name and meaning in the hope of providing readers with more options to find new, interesting, not yet read works.
Discussion, reviews of the book React 16 Tooling and just readers' own opinions. Leave your comments, write what you think about the work, its meaning or the main characters. Specify what exactly you liked and what you didn't like, and why you think so.