Skip to content

Commit 2311b97

Browse files
committed
betterments
1 parent 64eae09 commit 2311b97

File tree

2 files changed

+30
-6
lines changed

2 files changed

+30
-6
lines changed

src/content/10/en/part10a.md

Lines changed: 29 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -11,11 +11,11 @@ Traditionally, developing native iOS and Android applications has required the d
1111

1212
One of the popular approaches to unify the platform-specific development has been to utilize the browser as the rendering engine. [Cordova](https://cordova.apache.org/) is one of the most popular platforms for building cross-platform applications. It allows for developing multi-platform applications using standard web technologies - HTML5, CSS3, and JavaScript. However, Cordova applications are running within an embedded browser window in the user's device. That is why these applications can not achieve the performance nor the look-and-feel of native applications that utilize actual native user interface components.
1313

14-
[React Native](https://reactnative.dev/) is a framework for developing native Android and iOS applications using JavaScript and React. It provides a set of cross-platform components that behind the scenes utilize the platform's native components. Using React Native allows us to bring all the familiar features of React such as JSX, components, props, state, and hooks into native application development. On top of that, we can utilize many familiar libraries in the React ecosystem such as [react-redux](https://react-redux.js.org/), [react-apollo](https://github.com/apollographql/react-apollo), [react-router](https://reacttraining.com/react-router/core/guides/quick-start) and many more.
14+
[React Native](https://reactnative.dev/) is a framework for developing native Android and iOS applications using JavaScript and React. It provides a set of cross-platform components that behind the scenes utilize the platform's native components. Using React Native allows us to bring all the familiar features of React such as JSX, components, props, state, and hooks into native application development. On top of that, we can utilize many familiar libraries in the React ecosystem such as [React Redux](https://react-redux.js.org/), [Apollo](https://github.com/apollographql/react-apollo), [React Router](https://reacttraining.com/react-router/core/guides/quick-start) and many more.
1515

1616
The speed of development and gentle learning curve for developers familiar with React is one of the most important benefits of React Native. Here's a motivational quote from Coinbase's article [Onboarding thousands of users with React Native](https://benbronsteiny.wordpress.com/2020/02/27/onboarding-thousands-of-users-with-react-native/) on the benefits of React Native:
1717

18-
> If we were to reduce the benefits of React Native to a single word, it would be “velocity”. On average, our team was able to onboard engineers in less time, share more code (which we expect will lead to future productivity boosts), and ultimately deliver features faster than if we had taken a purely native approach.
18+
> <i>If we were to reduce the benefits of React Native to a single word, it would be “velocity”. On average, our team was able to onboard engineers in less time, share more code (which we expect will lead to future productivity boosts), and ultimately deliver features faster than if we had taken a purely native approach.</i>
1919
2020
### About this part
2121

@@ -74,14 +74,38 @@ Let's look at the <i>scripts</i> section of the <i>package.json</i> file which h
7474
"start": "expo start",
7575
"android": "expo start --android",
7676
"ios": "expo start --ios",
77-
"web": "expo start --web",
78-
"eject": "expo eject"
77+
"web": "expo start --web"
7978
},
8079
// ...
8180
}
8281
```
8382

84-
Running the script <em>npm start</em> starts the [Metro bundler](https://facebook.github.io/metro/) which is a JavaScript bundler for React Native. It can be described as the [Webpack](https://webpack.js.org/) of the React Native ecosystem. In addition to the Metro bundler, the Expo command-line interface should be open in the terminal window. The command-line interface has a useful set of commands for viewing the application logs and starting the application in an emulator or in Expo's mobile application. We will get to emulators and Expo's mobile application soon, but first, let's open our application.
83+
Let us now run the script _npm start_
84+
85+
![](../../images/10/25new.png)
86+
87+
> <i>If the script fails with error</i>
88+
>
89+
>```
90+
>error:03000086:digital envelope routines::initialization
91+
>```
92+
>
93+
> <i>change the package.json as follows</i>
94+
>
95+
>```javascript
96+
>{
97+
> // ...
98+
> "scripts": {
99+
> "start": "export SET NODE_OPTIONS=--openssl-legacy-provider && expo start", // highlight-line
100+
> "android": "expo start --android",
101+
> "ios": "expo start --ios",
102+
> "web": "expo start --web"
103+
> },
104+
> // ...
105+
>}
106+
>```
107+
108+
The script starts the [Metro bundler](https://facebook.github.io/metro/) which is a JavaScript bundler for React Native. It can be described as the [Webpack](https://webpack.js.org/) of the React Native ecosystem. In addition to the Metro bundler, the Expo command-line interface should be open in the terminal window. The command-line interface has a useful set of commands for viewing the application logs and starting the application in an emulator or in Expo's mobile application. We will get to emulators and Expo's mobile application soon, but first, let's open our application.
85109
86110
Expo command-line interface suggests a few ways to open our application. Let's press the "w" key in the terminal window to open the application in a browser. We should soon see the text defined in the <i>App.js</i> file in a browser window. Open the <i>App.js</i> file with an editor and make a small change to the text in the <em>Text</em> component. After saving the file you should be able to see that the changes you have made in the code are visible in the browser window.
87111

src/content/3/en/part3b.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -255,7 +255,7 @@ When the application is deployed, we must create a [production build](https://re
255255

256256
A production build of applications created with <i>create-react-app</i> can be created with the command [npm run build](https://github.com/facebookincubator/create-react-app#npm-run-build-or-yarn-build).
257257

258-
Let's run this command from the <i>root of the frontend project</i>.
258+
Let's run this command from the <i>root of the notes frontend project</i> that we developend in [Part 2](/en/part2).
259259

260260
This creates a directory called <i>build</i> (which contains the only HTML file of our application, <i>index.html</i> ) which contains the directory <i>static</i>. [Minified](<https://en.wikipedia.org/wiki/Minification_(programming)>) version of our application's JavaScript code will be generated in the <i>static</i> directory. Even though the application code is in multiple files, all of the JavaScript will be minified into one file. All of the code from all of the application's dependencies will also be minified into this single file.
261261

0 commit comments

Comments
 (0)